<template>

  <v-md-editor :model-value="essay.content" mode="preview" ref="preview" />

</template>

<script setup>
import {onMounted, ref} from "vue";
import request from "@/utils/request";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

const essay=ref({})
const titles=ref([])
const preview=ref()
const route=useRoute()
const store=useStore()

onMounted(async () => {
  await request.get("essay/get/" + route.params.essayId).then(res => {
    console.log(res)
    essay.value = res.data
  })

  const anchors = preview.value.$el.querySelectorAll('h1,h2,h3,h4,h5,h6');
  const ititles = Array.from(anchors).filter((title) => !!title.innerText.trim());
  if (!ititles.length)
    titles.value = [];
  else {
    const hTags = Array.from(new Set(ititles.map((title) => title.tagName))).sort();
    titles.value = ititles.map((el) => ({
      title: el.innerText,
      lineIndex: el.getAttribute('data-v-md-line'),
      indent: hTags.indexOf(el.tagName),
    }))

    store.commit("setDirectoryContent",titles.value)
    store.commit("setPreviewRef",preview.value)
  }
})




</script>
